<template>
    <div class="table">
        <div class="container">
          <el-row>
            <el-col :span="6">
              <el-card class="left-card">
                <el-scrollbar class="scroll-tree">
                  <el-tree
                    ref="categorys"
                    :props="props"
                    :data="categorysData"
                    :default-expand-all="true"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    @node-click="handleNodeClick">
                  </el-tree>
                </el-scrollbar>
              </el-card>
            </el-col>
            <el-col :span="18">
              <el-card class="right-card">
                <div class="handle-box">
                    <el-button type="primary" size="mini"  class="handle-del mr10" @click="add">新增</el-button>
                    <el-input v-model="keyword" size="mini"  placeholder="筛选名称" class="handle-input mr10"></el-input>
                    <el-button type="primary" size="mini"  @click="query">筛选</el-button>
                </div>
                <el-table style="width:100%" :data="tableData.records"   :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                    <el-table-column type="index" label="序号" align="center" width="50"/>
                            <el-table-column prop="fdName" label="分类名称" />
                            <el-table-column prop="fdParentName" label="所属分类名称" sortable width="150"/>
                            <el-table-column prop="fdCreateTime" label="创建时间" :formatter="dateFormat" sortable width="150"/>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
    import dateUtil from '@/utils/dateUtils';
    export default {
        name: 'sysPermissionRoleCategoryList',
        data() {
          return {
            tableData:{
                keyword: '',
                size:0,
                total:0,
                current:1,
                records: []
            },
            keyword: '',
            currentTreeValue:'',
            props: {
              label: 'name',
              value: 'id'
            },
            categorysData:[]
          }
        },
        activated(){
            this.getData();
            this.getCategoryData((data)=>{
              this.categorysData = [];
              this.categorysData.push({"id":"","name":"角色分类",children:data});
            })
        },
        created() {
            this.getData();
            this.getCategoryData((data)=>{
              this.categorysData = [];
              this.categorysData.push({"id":"","name":"角色分类",children:data});
            })
        },
        methods: {
            add() {
                const param = {path: "/sys/permission/sys_permission_role_category/edit"}
                this.$common.openTag(param);
            },
            getData() {
                this.$post('/api/sys/permission/sys_permission_role_category/list',{
                    keyword: this.tableData.keyword,
                    current: this.tableData.current,
                    fdParentId:this.currentTreeValue
                }).then((res) => {
                    this.tableData = res.data;
                });
            },
            query(){
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            dateFormat(obj,column){
                return dateUtil.format(obj.fdCreateTime);
            },
            handleEdit(row){
                let id = row.fdId;
                this.$common.openTag({
                    path: "/sys/permission/sys_permission_role_category/edit",
                    query: {id:id}
                });
            },
            handleDelete(index,row){
                this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                    this.$delete('/api/sys/permission/sys_permission_role_category',{
                        id:row.fdId
                    }).then((res) => {
                        this.tableData.records.splice(index,1)
                        this.$message({type:'success',message:'删除成功!'})
                    });
                })
            },
            handleCurrentChange(value){
                this.tableData.current = value;
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            getCategoryData(callback){
              let params = {}
              this.$fetch('/api/sys/permission/sys_permission_role_category/treeData',params).then((res) => {
                if(res.status==1){
                  return callback(res.data);
                }
              });
            },
            handleNodeClick(data) {
              this.currentTreeValue = data.id;
              this.getData();
            }
        }
    }
</script>

<style scoped>
 @import "~@/assets/css/list.css";
 .scroll-tree{
  height:500px;
  width:280px;
  float:left;
}
.left-card {
  margin-right: 15px;
}
</style>
